<script  lang="ts" setup>
import { onMounted, defineProps, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Api } from "@/apis"
import type { RankingData } from '@/typings'
import { useCounterStore } from '@/stores/counter'

import ContentPreview from './ContentPreview.vue'

const store = useCounterStore()

const { browseRecords } = store

const props = defineProps<{
    rid: string
    typename: string
}>()

const router = useRouter()

const goToDetail = (bvid: string, r: RankingData) => {
    let obj = {
        bvid: r.bvid,
        aid: r.aid,
        length: r.duration,
        title: r.title,
        play: r.play,
        video_review: r.video_review,
        pic: r.pic
    }
    browseRecords(obj)
    router.push(`/video/${bvid}`)

}

const rankingData = ref<Array<RankingData>>([])

// 这里是获取主页数据的 不同的rid 有不同返回值
const getRankingData = async () => {
    let { data } = await Api.getRankingData(props.rid, props.typename)

    rankingData.value = data.data
    console.log('**** rankingData ****')
    console.log('主页数据(data):', data.data, props.rid)
    console.log('**** rankingData ****')
}

onMounted(() => {
    getRankingData()
})

</script>

<template>
    <div class="flex flex-wrap">
        <div v-for="(r, i) in rankingData" :key="r.aid + i" class="w-1/2 px-1 py-2" v-show="i < 4"
            @click="goToDetail(r.bvid, r)">
            <ContentPreview :list="r" />
        </div>
    </div>
</template>
